<script setup lang="ts">
  defineOptions({
    name: 'DragonBoatFestival',
    inheritAttrs: false
  })
</script>
<template>
  <div id="zongzi">
    <div class="loading">
      <div class="loading-assets">
        <img class="loading-item" src="./svg/rice.svg" />
        <img class="loading-item" src="./svg/jujube.svg" />
        <img class="loading-item" src="./svg/palm-leaf.svg" />
      </div>
      <img class="loading-result" src="./svg/zongzi.svg" />
      <svg xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="mix">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"
            />
          </filter>
        </defs>
      </svg>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @use 'sass:math';
  #zongzi {
    position: relative;

    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;

    background-color: black;
  }

  $duration: 4.2s;
  $delay: math.div(-$duration, 2);

  .loading {
    position: relative;

    width: 200px;
    height: 200px;

    .loading-assets {
      width: 100%;
      height: 100%;

      animation:
        rotate $duration infinite,
        mix $duration infinite;
      animation-delay: $delay;
    }

    .loading-result {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 50px;
      height: 50px;
      margin-top: -25px;
      margin-left: -25px;

      animation: show $duration infinite;
      animation-delay: $delay;

      filter: drop-shadow(0px 0px 8px rgba(252, 233, 124, 0.5));
    }

    .loading-item {
      position: absolute;
      top: 50%;
      left: 50%;

      width: 60px;
      height: 60px;
      margin: -30px 0 0 -30px;

      border-radius: 50%;

      filter: drop-shadow(0px 0px 8px rgba(252, 233, 124, 0.8));
      @for $i from 1 through 3 {
        &:nth-child(#{$i}) {
          animation: #{'item-move-' + $i} $duration infinite;
          animation-delay: $delay;
        }
      }
    }
  }

  @keyframes item-move-1 {
    0%,
    20%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    40% {
      transform: translate(0, -18px) scale(0.7);
    }
    60% {
      transform: translate(0, -85px) scale(0.7);
    }
    80% {
      transform: translate(0, -85px) scale(0.7);
    }
  }

  @keyframes item-move-2 {
    0%,
    20%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    40% {
      transform: translate(-16px, 12px) scale(0.7);
    }
    60% {
      transform: translate(-90px, 65px) scale(0.7);
    }
    80% {
      transform: translate(-90px, 65px) scale(0.7);
    }
  }

  @keyframes item-move-3 {
    0%,
    20%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    40% {
      transform: translate(16px, 12px) scale(0.7);
    }
    60% {
      transform: translate(90px, 65px) scale(0.7);
    }
    80% {
      transform: translate(90px, 65px) scale(0.7);
    }
  }

  @keyframes rotate {
    0%,
    60% {
      transform: rotate(0deg);
    }
    80%,
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes mix {
    0%,
    40% {
      opacity: 1;

      filter: url(#mix);
    }
    8%,
    36% {
      opacity: 0;
    }
    48%,
    80% {
      opacity: 1;

      filter: none;
    }
    100% {
      opacity: 1;

      filter: url(#mix);
    }
  }

  @keyframes show {
    0%,
    48%,
    100% {
      transform: scale(1);

      opacity: 0;
    }
    8%,
    36% {
      transform: scale(1.5);

      opacity: 1;
    }
  }
</style>
